import React, { useState, useMemo, useEffect } from 'react'
import styles from '../css分支/Detail.module.css'
import { Arrow, ChatO, Circle } from '@react-vant/icons';
import { Grid, Image, Tabs } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, BalanceO, Points } from '@react-vant/icons';
import axios from 'axios'
import { use } from 'react';
const items = ['全部', '收入', '支出']
export default function Detail() {
    const navigate = useNavigate()
    const [list, setlist] = useState({})
    const [records,setrecords]=useState([])
    const getlist = async () => {
        let res = await axios.get('http://localhost:3000/xzx/business')
        setlist(res.data.data)
        console.log(res.data.data);
        setrecords(res.data.data.record)
        //   setValue(res.data.data.gonggao)
    }
    useEffect(() => {
        getlist()
       
    }, [])
    return (
        
        <div className={styles.main}>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.2rem' }} onClick={() => { navigate('/money') }} />
                <p style={{ fontSize: '0.22rem' }}>余额明细</p>
                <p style={{ marginRight: '0.1rem' }}>
                    <Points />
                </p>
            </div>
            <div className={styles.center}>
                <Tabs defaultActive={0}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>

                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
            <div className={styles.body3}>
                {records.map((item, index) => {
                    return (
                        <div className={styles.body3_fen}>
                            <div style={{ marginLeft: '0.2rem' }}>
                                <p style={{ marginBottom: '0.1rem' }}>余额{item.type}</p>

                                <p style={{ fontSize: '0.14rem', }}>{item.time}</p>
                            </div>
                            <div style={{ marginRight: '0.2rem', }}>
                                <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;
                                    ￥{item.money}</p>

                                <p style={{ fontSize: '0.14rem', }}>余额：{item.yue}</p>
                            </div>
                        </div>
                    )
                })
                }

                {/* <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div>
                <div className={styles.body3_fen}>
                    <div style={{ marginLeft: '0.2rem' }}>
                        <p style={{ marginBottom: '0.1rem' }}>余额提现</p>

                        <p style={{ fontSize: '0.14rem', }}>2024-2-17 09:30:50</p>
                    </div>
                    <div style={{ marginRight: '0.2rem', }}>
                        <p style={{ color: 'red', marginBottom: '0.1rem' }}>&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
                            -407.56</p>

                        <p style={{ fontSize: '0.14rem', }}>余额：2309.44</p>
                    </div>
                </div> */}
            </div>
        </div>
    )
}
